import React from "react";
import ReactDom from "react-dom"
import './04.css'
//父元素向子元素传递数据
class Child extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className='showBorder'>
                <div>这是子组件</div>
                <div>来自父组件的内容：{this.props.content}</div>
            </div>
        );
    }
}

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: ''
        };
        this.click = this.click.bind(this)
    }

    click() {
        let value = document.querySelector('input').value;
        this.setState({
            content: value
        })
    }

    render() {
        return (
            <div>
                <div>这是父组件</div>
                <input type="text" onChange={this.click}/> <button onClick={this.click}>点击</button>
                <Child content={this.state.content}/>
            </div>
        );
    }
}

ReactDom.render(
    <Parent/>,
    document.querySelector('#root')
)